<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Rotating Linear Gradient SVG</title>
    <style>
      * {
        box-sizing: border-box;
      }
      body {
        margin: 0;
        padding: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100vh;
        background-color: #f0f0f0;
        --stroke-width: 6px;
      }
      svg {
        overflow: visible;
        position: absolute;
        z-index: -1;
        top: 0;
        left: 0;
      }
      #btn {
        width: 240px;
        height: 80px;
        /* border: 2px solid rgb(249, 8, 8); */
        position: relative;
        border-radius: 100px;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 1.6rem;
      }
    </style>
  </head>
  <body>
    <div id="btn">
      hellocode
      <svg width="100%" height="100%" fill="none" xmlns="http://www.w3.org/2000/svg">
        <rect
          rx="40"
          style="
            x: calc(var(--stroke-width) / 2);
            y: calc(var(--stroke-width) / 2);
            width: calc(100% - var(--stroke-width));
            height: calc(100% - var(--stroke-width));
            stroke-width: var(--stroke-width);
          "
          stroke="url(#test)"
        />

        <defs>
          <linearGradient id="test" x1="0" y1="0.5" x2="1" y2="0.5">
            <animateTransform attributeName="gradientTransform" type="rotate" from="0 0.5 0.5" to="360 0.5 0.5" dur="10s" repeatCount="indefinite" />
            <stop offset="0" stop-color="#FFBD13"></stop>
            <stop offset="1" stop-color="#7000FF" />
          </linearGradient>
        </defs>
      </svg>
    </div>
  </body>
</html>
